<template>
  <div 
        id="AuthOverlay" 
        class="fixed flex items-center justify-center z-50 top-0 left-0 w-full h-full bg-black bg-opacity-50"
    >
        <div class="relative bg-white w-full max-w-[470px] h-[70%] p-4 rounded-lg">

            <div class="w-full flex justify-end">
                <button 
                  @click="$generalStore.isLoginOpen = false"
                  class="p-1.5 rounded-full bg-gray-100"
                >
                    <Icon name="mdi:close" size="26"/>
                </button>
            </div>

            <Login v-if="isRegister" />
            <Register v-else />

            <div class="absolute flex items-center justify-center py-5 left-0 bottom-0 border-t w-full">
                <span class="text-[14px] text-gray-600">Don’t have an account?</span>
                <button 
                    @click="isRegister = !isRegister" 
                    class="text-[14px] text-[#F02C56] font-semibold pl-1"
                >
                    <span v-if="isRegister">Sign up</span>
                    <span v-else>Log in</span>
                </button>
            </div>
            
        </div>
    </div>
</template>
<script setup>
const { $generalStore } = useNuxtApp()
let isRegister = ref(true)

</script>